import {SVG} from '@svgdotjs/svg.js'
import '@svgdotjs/svg.draggable.js'

class ViewNode{
    constructor(element){
        this.root = element
        // this.draw = SVG().size(window.innerWidth,window.innerHeight).addTo(element)
        this.draw = SVG().addTo(element).size(window.innerWidth, window.innerHeight).viewbox(0, 0, window.innerWidth, window.innerHeight)
        this.nodes = []
        this.beginLine = {x:0,y:0}
        this.mousePos  = {x:0,y:0}
        this.drawLine = false
        this.line = this.draw.line(0,0,0,0)
        this.currentNode = null
        this.startNode = null

        this.draw.on("mousemove", (e) =>{
            this.mousePos.x = e.clientX
            this.mousePos.y = e.clientY
            if(this.drawLine){
                this.line.remove()
                this.line = this.draw.line(this.beginLine.x,this.beginLine.y,this.mousePos.x,this.mousePos.y)
                this.line.stroke({ width: 2, color: '#000' })
                // console.log(this.line)
                this.draw.node.insertBefore(this.line.node, this.draw.node.firstChild)
            }
        })
        this.draw.on("mouseup", (e) =>{
            this.drawLine = false
            this.line.remove()
        })
    }
    createRect(text){
        // 创建一个矩形
        let rect = new RectNode(this.draw, text)
        this.nodes.push(rect)

        let isDrag = false

        rect.root.on("mousemove", (event)=>{
            const {offsetX, offsetY} = event
            
            if(isDrag){
                rect.x += offsetX - rect.oldPoint.x
                rect.y += offsetY - rect.oldPoint.y
                // console.log(this.x,this.y)
                rect.updateLines(this.draw)
            }
            rect.oldPoint.x = offsetX
            rect.oldPoint.y = offsetY
        })

        rect.root.on("mousedown",()=>{
            isDrag = true
        })

        rect.root.on("mouseup",()=>{
            isDrag = false
            // console.log(this.drawLine)
            if(this.drawLine){
                this.startNode.addLine(this.draw , this.currentNode);
                // console.log(rect)
                this.drawLine = false
            }
        })
        rect.root.on("mouseover", () => {
            rect.left.node.style.opacity = 1
            rect.right.node.style.opacity = 1
            this.currentNode = rect
            // console.log(this.currentNode)
            // if(isDrag){
            //     isDrag = false
            // }
        })

        rect.root.on("mouseout", () => {
            rect.left.node.style.opacity = 0
            rect.right.node.style.opacity = 0
            // isDrag = false
        })



        rect.left.on("mouseover",(e) => {
            e.stopPropagation();
            rect.root.draggable(false)
            rect.left.node.style.opacity = 1
            rect.right.node.style.opacity = 1
            // this.drawLine = true
        })
        rect.right.on("mouseover",(e) => {
            e.stopPropagation();
            rect.root.draggable(false)
            rect.left.node.style.opacity = 1
            rect.right.node.style.opacity = 1
            // this.drawLine = true
            // console.log(rect.x,rect.y)
        })
        rect.left.on("mouseout",(e) => {
            e.stopPropagation();
            rect.root.draggable(true)
            rect.left.node.style.opacity = 0
            rect.right.node.style.opacity = 0
            // isDragLeft = false
            // this.drawLine = false
        })
        rect.right.on("mouseout",(e) => {
            e.stopPropagation();
            rect.root.draggable(true)
            rect.left.node.style.opacity = 0
            rect.right.node.style.opacity = 0
            // isDragRight = false
            // this.drawLine = false
        })
        // let beginLine = {x:0,y:0}
        rect.left.on("mousedown",(e) => {
            e.stopPropagation();
            // this.root.draggable(true)
            // isDragLeft = true
            // console.log(isDragLeft)
            this.beginLine.x = e.clientX
            this.beginLine.y = e.clientY
            this.drawLine = true
            this.startNode = rect
        })
        rect.right.on("mousedown",(e) => {
            e.stopPropagation();
            // this.root.draggable(true)
            // isDragLeft = true
            this.beginLine.x = e.clientX
            this.beginLine.y = e.clientY
            this.drawLine = true
            // console.log(this.drawLine)
            this.startNode = rect
        })
        rect.left.on("mouseup",(e) => {
            e.stopPropagation();
            // this.root.draggable(true)
            // isDragLeft = false
            // console.log(isDragLeft)
            this.drawLine = false
        })
        rect.right.on("mouseup",(e) => {
            e.stopPropagation();
            // this.root.draggable(true)
            // isDragLeft = false
            this.drawLine = false
        })
        
        rect.left.on("mousemove",(e) => {
            e.stopPropagation();
            // const {clientX,clientY} = e
            // if(isDragLeft){
            //     const line = draw.line(beginLine.x, beginLine.y, clientX, clientY)
            //     console.log("hh")
            // }
        })
        rect.right.on("mousemove",(e) => {
            e.stopPropagation();
            // const {clientX,clientY} = e
            // if(isDragLeft){
            //     const line = draw.line(beginLine.x, beginLine.y, clientX, clientY)
            // }
        })
        rect.root.on("dblclick", () => {
            let editor = new Editor(rect)
        })
    }
}

class Editor{
    constructor(node){
        this.root = document.createElement('div')
        this.root.className = "edit"

        this.root.style.width = '300px'
        this.root.style.height = '150px'
        this.root.style.position = 'fixed'
        this.root.style.backgroundColor = 'red'
        this.root.style.zIndex = "100"
        this.root.style.top = "0"
        this.root.style.left = "0"
        this.root.style.borderRadius = "10px"

        this.input = document.createElement("input")
        this.input.value = node.text.text()
        this.input.style.width = "100%"
        this.input.style.height = "50px"
        this.input.style.outline = "none"
        this.input.style.boxSizing = "border-box"
        this.input.style.fontSize = "24px"

        this.root.appendChild(this.input)

        document.body.appendChild(this.root)

        let oldPoint = {
            x: 0,
            y: 0
        }
        let isDrag = false
        this.input.addEventListener("input", (e) => {
            // console.log(e)
            node.setText(this.input.value)
        })
        this.input.addEventListener("mousemove", (e) => {
            e.stopPropagation()
        })
        this.input.addEventListener("mouseup", (e) => {
            e.stopPropagation()
        })
        this.input.addEventListener("mousedown", (e) => {
            e.stopPropagation()
        })
        this.root.addEventListener("mousemove", (e) => {

            // e.stopPropagation()
            let {clientX,clientY}  = e

            if(isDrag){
                this.root.style.top = (parseInt(this.root.style.top) || 0) + (clientY - oldPoint.y) + 'px'
                this.root.style.left = (parseInt(this.root.style.left) || 0) + (clientX - oldPoint.x) + 'px'
            }
            oldPoint.x = clientX
            oldPoint.y = clientY
        })
        this.root.addEventListener("mousedown", (e) => {
            // let {clientX,clientY}  = e
            isDrag = true

        })
        this.root.addEventListener("mouseup", (e) => {
            // let {clientX,clientY}  = e
            isDrag = false
        })
    }
}

class RectNode{
    constructor(draw, text1){
        this.draw = draw
        this.lines = []
        this.children = []
        this.root = draw.group()
        // this.root.dom.style.cursor = "pointer"
        // console.log(this.root)

        // const text = draw.text(text1)
        // text.size = 16
        // const width = text.width + 10
        let left = draw.circle(10)
        let right = draw.circle(10)
        

        const text = draw.text(text1);
        // text.style('font-size', '16px'); // 正确设置字体大小
        // text.style('text-anchor','middle'); // 设置文本锚点为中心
        // text.style("cursor","pointer")
        text.node.style.cursor = 'pointer'; // 直接操作DOM节点
        text.node.style.userSelect = 'none'
        this.root.add(text)
        // text.style('font-size', '16px'); // 正确设置字体大小

        // 获取文本的实际宽度（需要渲染后才能计算）
        const textbox = text.node.getBoundingClientRect(); // 返回 DOMRect 对象
        // console.log(textbox);
        
        const width = textbox.width + 10; // 真实宽度 + 10
        // console.log(width)
        const height = textbox.height + 8
        const rect = draw.rect(width,height).fill("#ffffff")
        rect.radius(10)
        rect.stroke("black")
        this.root.add(rect)
        rect.back();
        text.move(5,4)
        left.move(-15,10)
        right.move(width + 5,10)
        
        left.node.style.opacity = 0
        right.node.style.opacity = 0
        // left.node.style.transition = "all 0.3s ease"
        // right.node.style.transition = "all 0.3s ease"
        // text.x(width/2)
        // text.y(height/2)
        // text.style('text-anchor', 'middle')
        // text.textAnchor("middle")
        // text.style.textAnchor = "middle"
        this.root.add(left)
        this.root.add(right)

        this.width = width
        this.height = height

        this.text = text
        this.rect = rect
        this.left = left
        this.right = right

        this.x = this.root.x() + width / 2 + 15
        this.y = this.root.y() + height / 2

        // console.log(this.x,this.y)

        // this.root.addTo(element)
        // this.root.move(50,50)
        // this.root = draw.rect(50,50).fill("blue")
        // let oldPoint = {x: 0, y: 0}
        this.root.draggable().on('dragstart', function(event) {
            
        }).on('drag', function(event) {
            
        }).on('dragend', function(event) {
            
        });

        this.oldPoint = {x:0,y:0}
    }
    setText(txt){
        let draw = this.draw
        let x = this.rect.x()
        let y = this.rect.y()
        this.text.remove()
        const text = draw.text(txt);
        // text.x(x)
        // text.y(y)
        // text.style('font-size', '16px'); // 正确设置字体大小
        // text.style('text-anchor','middle'); // 设置文本锚点为中心
        // text.style("cursor","pointer")
        text.node.style.cursor = 'pointer'; // 直接操作DOM节点
        text.node.style.userSelect = 'none'
        this.root.add(text)
        const textbox = text.node.getBoundingClientRect(); // 返回 DOMRect 对象
        // console.log(textbox);
        
        const width = textbox.width + 10; // 真实宽度 + 10
        // console.log(width)
        const height = textbox.height + 8
        this.rect.remove()
        const rect = draw.rect(width,height).fill("#ffffff")
        rect.x(x)
        rect.y(y)
        rect.radius(10)
        rect.stroke("black")
        this.root.add(rect)
        rect.back();
        text.move(x+5,y+4)
        this.x = this.root.x() + width / 2 + 15
        this.y = this.root.y() + height / 2
        this.rect = rect
        this.text = text
    }
    addLine(draw, node) {
        // 确保有有效的目标节点
        if (!node || !node.root) return;
        console.log(this)
        
        // 获取正确的SVG坐标位置
        let startX = this.x;
        let startY = this.y;
        let endX = node.x;
        let endY = node.y;
        // console.log(startX,startY)
        // console.log(endX,endY)
        // 添加连接线
        let line = draw.line(startX, startY, endX, endY)
            .stroke({ width: 2, color: '#000' })
            // .zIndex(0)
        draw.node.insertBefore(line.node, draw.node.firstChild)
        // line.node.style.zIndex = -1
        // 保存线条引用
        let finalLine = {
            end: node.root,
            startX: startX,
            startY: startY,
            endX: endX,
            endY: endY,
            root: line,
        }
        
        this.lines.push(finalLine);
        this.children.push(node);
        node.lines.push(finalLine)
        // console.log("添加线条:", line);
    }
    updateLines(draw){
        for(let l of this.lines){
            if(l.end !== this.root){
                l.root.remove()
                l.startX = this.x
                l.startY = this.y
                l.root = draw.line(l.startX, l.startY, l.endX, l.endY)
                    .stroke({ width: 2, color: '#000' })
                    // .zIndex(0)
                draw.node.insertBefore(l.root.node,draw.node.firstChild)
            }else{
                l.root.remove()
                l.endX = this.x;
                l.endY = this.y;
                l.root = draw.line(l.startX, l.startY, l.endX, l.endY)
                    .stroke({ width: 2, color: '#000' })
                    // .zIndex(0)
                draw.node.insertBefore(l.root.node,draw.node.firstChild)
            }
        }
    }
    
}

export {ViewNode}